@import './base';

html,
body {
   width: 100%;
   min-width: 1060px;
}

body {
   background-color: #fafafa;
}

/* 整个网页的大盒子 */
.musician-dom {
   width: 100%;
   height: 100%;



   /* 网页内的内容盒子 */
   .musician-content-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;



      /* 头部区域——默认样式 */
      .musician-header {
         display: flex;
         justify-content: center;
         align-items: center;
         position: sticky;
         top: 0px;
         z-index: 1000;

         width: 100%;
         height: 60px;
         margin-top: 0.1px;
         padding-left: 40px;
         background-color: transparent;
         color: #000;
         overflow: hidden;

         /* 头部内容区域 */
         .header-content {
            display: flex;
            align-items: center;
            width: 100% !important;
            max-width: 1440px;
            min-width: 1060px;
            height: 100%;
            line-height: 60px;


            /* 左边logo部分 */
            .logo-svg {
               display: block;
               width: 200px;
               min-width: 200px;
               font-size: 16px;

               img {
                  width: 153px;
                  height: 22px;
               }
            }

            /* 右边的导航部分 */
            .header-navbar {
               display: flex;
               flex: 1;
               height: 100%;

               /* 导航条 */
               .nav {
                  flex: 1;
                  min-width: 635px;
                  max-width: 759px;
                  height: 100%;

                  ul {

                     li {
                        float: left;
                        margin-right: 20px;
                        line-height: 60px;
                        font-weight: 400;

                        a {
                           display: block;
                           padding: 0 10px;
                           font-size: 16px;
                           opacity: .8;
                           color: #000;
                        }
                     }
                  }
               }

               /* 用户部分 */
               .header-user {
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  width: 475px;
                  height: 60px;
                  font-size: 14px;

                  /* 左边用户头像 */
                  .user-center {
                     // display: inline-block;
                     height: 24px;

                     .i-pic {
                        float: left;
                        margin-right: 5px;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                           width: 100%;
                           height: 100%;
                           overflow: hidden;
                        }
                     }

                     /* 用户姓名部分 */
                     .username {
                        position: relative;
                        left: 0;
                        top: 0;
                        float: left;

                        .name {
                           height: 24px;
                           line-height: 24px;
                        }
                     }
                  }

                  /* 中间的竖线 */
                  .split-line {
                     display: inline-block;
                     margin: 0 22px;
                     width: 1px;
                     height: 16px;
                     background-color: #000;
                     opacity: .3;
                  }

                  /* 右边用户邮箱 */
                  .mailbox {
                     display: inline-block;
                     width: 24px;
                     height: 16px;
                     margin-right: 16px;

                     a {
                        display: block;
                        width: 100%;
                        height: 100%;

                        i {
                           display: block;
                           width: 100%;
                           height: 100%;
                           font-size: 16px;
                           // color: #000;
                           line-height: 16px;
                        }
                     }
                  }
               }


            }
         }
      }

      /* 头部区域——定位后样式 */
      .header-sticky,
      .header-sticky a,
      .header-sticky i {
         color: #fff !important;
         background-color: #000 !important;
      }

      .header-sticky .split-line {
         background-color: #fff !important;
      }




      /* 内容主体区域 */
      .musician-content {
         width: 100%;

         /* 内容主体第一部分 */
         .content-item1 {
            display: flex;
            justify-content: center;
            position: relative;
            width: 100%;
            height: 702px;
            background-image: -webkit-linear-gradient(-90deg, #fafafa 83%, #f3cecc);

            /* 内容盒子 */
            .item1-content {
               position: relative;
               display: flex;
               flex-direction: column;
               align-items: center;
               z-index: 10;

               .item1-title {
                  margin-bottom: 27px;
                  color: #fff;
                  font-size: 22px;
                  color: #000;
                  text-transform: uppercase;
                  line-height: 2.043;
                  text-align: center;
                  letter-spacing: 15px;
               }

               .item1-bgc1 {
                  width: 375px;
                  height: 175px;
                  margin-bottom: 40px;
                  background-image: url(../images/musician-wellcome.png);
                  background-size: cover;
               }

               .item1-bgc2 {
                  width: 919px;
                  height: 333px;
                  background-image: url(../images/Entrance_background.png);
                  background-size: contain;
                  background-repeat: no-repeat;
                  margin-bottom: 40px;
               }

               /* 定位在外的盒子 */
               .item1-bottom {
                  display: flex;
                  justify-content: space-between;
                  position: absolute;
                  bottom: -0;
                  transform: translateY(50%);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 915px;
                  border-radius: 42px;
                  background-color: #fff;
                  padding: 28px 0;
                  background-color: #fff;

                  .left {
                     flex: 1;
                     text-align: center;
                     width: 201px;
                     margin: 0 165px;
                     font-size: 28px;
                     color: #000;
                  }

                  i {
                     width: 1px;
                     height: 30px;
                     background-color: #000;
                  }

                  .right {
                     flex: 1;
                     text-align: center;
                     width: 201px;
                     margin: 0 165px;
                     font-size: 28px;
                     color: #000;
                  }
               }
            }
         }

         /* 内容主体第二部分 */
         .content-item2 {
            position: relative;
            width: 100%;
            height: 896px;
            overflow: hidden;

            /* 内容盒子 */
            .item2-content {
               width: 100%;
               height: 100%;

               /* 被覆盖的文字部分 */
               .content-text {
                  position: absolute;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 2210px;
                  height: 100%;
                  font-size: 165px;
                  font-weight: 700;
                  white-space: nowrap;
                  color: rgba(0, 0, 0, .02);
                  overflow: hidden;

                  .text-one {
                     margin: 0;
                     margin-left: 470px;
                     line-height: 1.1;
                     user-select: none;
                  }

                  .text-two {
                     margin: 0;
                     line-height: 1.1;
                     user-select: none;
                  }

               }


               /* 40W音乐人已加入文字 */
               .content-text2 {
                  display: flex;
                  justify-content: center;
                  height: 417px;

                  h1 {
                     margin-top: 150px;
                     line-height: 1.3;
                     font-size: 52px;
                     color: #1d1d1f;
                  }
               }


               /* 轮播盒子 */
               .banner-box {
                  position: relative;
                  max-width: 1440px;
                  min-width: 1060px;
                  margin: -50px auto 60px;
                  overflow: hidden;

                  /* 上下两个轮播图的盒子 */
                  &>div {
                     display: flex;
                     width: 1620px;
                     margin-bottom: 60px;
                     animation: animateBanner 20s linear infinite forwards;

                     /* 轮播图里面的每一个盒子 */
                     &>div {
                        width: 160px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 160px;
                        margin-left: 20px;

                        .pic {
                           position: relative;
                           width: 160px;
                           height: 160px;

                           &:hover .title {
                              opacity: 1;
                           }

                           img {
                              width: 160px;
                              height: 160px;
                              border-radius: 50%;

                           }

                           .title {
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: flex;
                              justify-content: center;
                              flex-wrap: wrap;
                              align-content: center;
                              width: 100%;
                              height: 100%;
                              background-color: rgba(255, 58, 58, .85);
                              opacity: 0;
                              border-radius: 50%;
                              text-align: center;

                              p {
                                 width: 100%;
                                 font-size: 14px;
                                 line-height: 1.5;
                                 color: #fff;
                              }

                           }
                        }

                        &>p {
                           margin-top: 20px;
                           font-size: 14px;
                           color: #1d1d1f;
                        }
                     }
                  }

                  @keyframes animateBanner {
                     100% {
                        transform: translateX(-1620px);
                     }
                  }
               }
            }
         }

         /* 内容主体第三部分 */
         .content-item3 {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 385px;

            .item3-content {
               height: 100%;

               h1 {
                  margin: 100px 0;
                  text-align: center;
                  line-height: 1.3;
                  font-weight: 600;
                  font-size: 52px;
               }
            }
         }

         /* 内容主体第四部分 */
         .content-item4 {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 600px;

            .item4-content {
               height: 100%;

               /* 上面的部分 */
               .item4-top {
                  text-align: center;

                  h1 {
                     font-size: 38px;
                     line-height: 1;
                     margin: 68px 0 18px;
                     color: #1d1d1f;
                     font-weight: 600;
                  }

                  h2 {
                     color: #1d1d1f;
                     font-family: Helvetica, FZLTZHK--GBK1-0;
                     font-weight: 500;
                     font-size: 18px;
                     line-height: 18px;
                     margin-bottom: 68px;
                  }
               }

               /* 底下的盒子 */
               .item4-bottom {
                  display: flex;
                  justify-content: center;
                  flex-wrap: wrap;
                  width: 740px;

                  .item4-items {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     width: 33.33%;
                     margin: 22px 0;

                     .pic {
                        width: 86px;
                        height: 86px;

                        img {
                           width: 86px;
                           height: auto;
                        }
                     }

                     h1 {
                        color: #1d1d1f;
                        font-size: 14px;
                     }

                     p {
                        color: #1d1d1f;
                        opacity: .8;
                        margin-top: 10px;
                        font-size: 14px;
                        line-height: 1.5;
                        text-align: center;
                     }
                  }

               }

            }
         }
      }

      /* 内容主体五部分 */
      .content-item5 {
         display: flex;
         justify-content: center;
         width: 100%;
         height: 2500px;

         .item5-content {
            width: 100%;
            height: 100%;

            // 内容盒子
            .item5-contentBox {
               position: relative;
               display: flex;
               flex-direction: column;
               align-items: center;
               position: sticky;
               top: 0;
               width: 100%;
               height: 715.5px;
               height: 1300px;
               padding-top: 25.5px;
               margin-bottom: 50px;
               // background-color: antiquewhite;
               overflow: hidden;

               /* 顶部文字 */
               .top-text {
                  position: absolute;
                  width: 100%;
                  height: 74px;
                  top: 68px;
                  z-index: 8;

                  h1 {
                     color: #1d1d1f;
                     position: absolute;
                     width: 100%;
                     text-align: center;
                     font-size: 38px;
                  }

                  h2 {
                     color: #1d1d1f;
                     position: absolute;
                     width: 100%;
                     text-align: center;
                     top: 56px;
                     font-size: 18px;
                  }
               }
            }
         }
      }

      /* 内容主体第六部分 */
      .content-item6 {
         display: flex;
         justify-content: center;
         width: 100%;
         margin-top: -800px;
         height: 1100px;

         .item6-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;

            /* 头部标题 */
            .item6-top {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

               h1 {
                  font-size: 38px;
                  line-height: 1;
                  margin-top: 68px;
                  margin-bottom: 18px;
               }

               h2 {
                  color: #1d1d1f;
                  font-size: 18px;
                  line-height: 18px;
                  margin-bottom: 68px;
               }
            }

            /* 中间内容图标 */
            .item6-center {
               display: flex;
               justify-content: center;
               flex-wrap: wrap;
               width: 1060px;
               margin-bottom: 63px;

               .item6-items {
                  display: flex;
                  align-items: center;
                  width: 25%;
                  margin: 21px 0;

                  .left {
                     width: 40px;
                     height: 40px;
                     background: url(../images/musician-Profit-01.png) no-repeat;
                     background-size: cover;
                  }

                  .right {
                     display: flex;
                     flex-direction: column;
                     justify-content: space-around;
                     height: 100%;

                     h1 {
                        color: #1d1d1f;
                        font-size: 14px;
                     }

                     p {
                        opacity: .8;
                        font-family: FZLTHK--GBK1-0;
                        font-size: 14px;
                     }
                  }
               }
            }

            /* 底部的三个手机 */
            .item6-footer {
               display: flex;
               justify-content: space-between;
               width: 1060px;
               height: 562px;

               .item6-pic {
                  height: 100%;

                  img {
                     height: 100%;
                  }
               }
            }
         }
      }

      /* 内容主体第七部分 */
      .content-item7 {
         display: flex;
         justify-content: center;
         width: 100%;
         height: 600px;
         margin-top: 30px;
         margin-bottom: 90px;

         .item7-content {
            width: 1060px;
            height: 100%;

            /* 上面的tab栏切换 */
            .tab-top {
               display: flex;
               justify-content: space-evenly;
               align-items: center;
               width: 100%;
               height: 51px;

               li {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 20%;
                  height: 100%;
               }

               div {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 100%;
                  height: 100%;

                  i {
                     width: 32px;
                     height: 100%;
                     margin: 0 auto;
                     background-size: 200% auto;
                     background-position: 100%;
                     background-repeat: no-repeat;
                     cursor: pointer;


                     &.i3 {
                        width: 96px;
                     }

                     &.i4 {
                        width: 119.75px;
                     }

                     &.i5 {
                        width: 120px;
                        height: 100%;
                        font-size: 15px;
                        line-height: 50px;
                        text-align: center;
                        color: rgba(0, 0, 0, .6);
                     }

                     &.active {
                        background-position: 0%;
                        color: #ff3a3a;
                     }
                  }
               }
            }

            /* 下面的轮播图盒子 */
            .banner {
               display: flex;
               justify-content: space-evenly;
               align-items: center;
               width: 100%;
               height: 623px;

               /* 轮播图的第N个盒子 */
               .ban {
                  display: none;
                  height: 100%;
                  width: 100%;
                  text-align: center;
                  font-size: 80px;


                  /* 共同样式部分 */
                  .ban-content {
                     display: flex;
                     flex-direction: column;
                     justify-content: center;
                     align-items: center;

                     // 轮播图上面的文字
                     .ban-top {
                        // display: flex;
                        // flex-direction: column;
                        // justify-content: center;
                        // align-items: center;
                        width: 100%;
                        height: 210px;

                        h1 {
                           text-align: center;
                           font-size: 38px;
                           line-height: 1;
                           margin-top: 68px;
                           margin-bottom: 18px;
                           color: #1d1d1f;
                        }

                        h2 {
                           text-align: center;
                           color: #1d1d1f;
                           font-size: 18px;
                           line-height: 18px;
                           margin-bottom: 68px;
                        }
                     }

                     // 轮播图的盒子
                     .ban-bottom {
                        flex: 1;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                        text-align: center;

                        /* 前两个轮播图的四个盒子的样式 */
                        .ban-item {
                           width: 230px;
                           text-align: center;
                           font-size: 14px;
                           color: #000;

                           .pic {
                              width: 100%;
                           }

                           .text {
                              opacity: .8;
                              font-size: 14px;
                              line-height: 1;

                              h1 {
                                 margin: 8px 0;
                                 opacity: 1;
                                 margin-top: 20px;
                                 margin-bottom: 14px;
                                 font-size: 14px;
                              }

                              p {
                                 margin: 5px 0;
                              }
                           }

                        }
                     }
                  }

                  /* 轮播图的激活状态 */
                  &.active {
                     display: block;
                  }

                  &.ban1 .ban-bottom {
                     height: 322px;
                  }

                  &.ban2 .ban-bottom {
                     height: 322px;

                     .pic {
                        position: relative;

                        .mask {
                           position: absolute;
                           top: 0;
                           left: 0;
                           width: 100%;
                           height: 100%;
                           display: none;
                           border-radius: 8px;
                           background-color: rgba(255, 58, 58, .9);

                           p {
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              align-content: center;
                              width: 100%;
                              height: 100%;
                              text-align: left;
                              font-size: 14px;
                              line-height: 1.5;
                              color: #fff;
                           }
                        }

                        &:hover .mask {
                           display: block;
                        }
                     }
                  }

                  &.ban3 .ban-bottom {
                     height: 316px;

                     &>div {
                        width: 507px;
                        height: 316px;
                     }
                  }

                  &.ban4 .ban-bottom {
                     height: 322px;

                     &>div {
                        width: 322px;
                        height: 322px;
                     }
                  }

                  &.ban5 .ban-bottom {
                     height: 540px;
                     flex-wrap: wrap;

                     &>div {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        width: 322px;
                        height: 223px;
                        margin-bottom: 47px;
                        border-radius: 8px;

                        img {
                           width: 100%;
                           height: 189px;
                        }

                        p {
                           font-size: 14px;
                           color: #000;
                        }
                     }

                     .ban5-more {
                        display: flex;
                        // justify-content: center;
                        align-items: center;

                        .text {
                           display: flex;
                           justify-content: center;
                           align-items: center;
                           width: 100%;
                           height: 189px;
                           border-radius: 8px;
                           background-color: hsla(0, 0%, 84.7%, .3);

                           color: rgba(0, 0, 0, .2);
                           font-size: 14px;
                           text-align: center;
                        }

                        p {
                           font-size: 0;
                        }
                     }
                  }

               }
            }
         }
      }
   }
}


/* 网页尾部通栏图片 */
.content-item9 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   width: 100%;
   height: 730px;
   background: url(../images/musician-footer.png);
   background-size: cover;
   background-position: 50%;
   color: #fff;

   .item9-content {
      display: flex;
      flex-direction: column;
      align-items: center;

      .item9-title {
         margin-bottom: 52px;
         width: 676px;
         height: 167px;

         img {
            width: 100%;
         }
      }
   }

   .itrm9-btn {
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 915px;
      border-radius: 42px;
      background-color: #fff;
      padding: 28px 0;

      .text1,
      .text2 {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 201px;
         margin: 0 165px;
         font-size: 28px;
         color: #000;
      }

      i {
         width: 1px;
         background-color: #000;
         opacity: .2;
         height: 30px;
      }
   }

}


/* 网页的尾部区域 */
.musician-footer {
   width: 100%;
   padding: 32px 40px;
   color: rgba(0, 0, 0, .6);
   font-size: 15px;

   .footer-content {
      max-width: 1060px;
      margin: 0 auto;

      >a {
         width: 116px;
         height: 20px;
         display: block;
         background: url(../images/musician-logo-footer.png);
         background-size: cover;
         background-repeat: no-repeat;
      }

      /* 版权服务信息 */
      .footer_content_1shg {
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         padding-top: 16px;
         margin-top: 16px;
         border-top: 1px solid rgba(0, 0, 0, .05);

         /* 左边版权 */
         .footer_root {
            width: 100%;
            padding: 32px 40px;
            color: rgba(0, 0, 0, .6);
            font-family: FZLTHK--GBK1-0;
            font-size: 15px;

            p {
               /* 文字有最小限制，可以设置较大字号，然后缩放缩小 */
               transform: scale(.68);
               transform-origin: top left;
               line-height: 17px;
            }
         }

         /* 右边服务 */
         .footer_serve {
            display: flex;
            width: 280px;
            justify-content: space-between;
            align-items: center;
            transform: scale(.68);

            a {
               padding-bottom: 1px;
            }
         }
      }
   }
}